<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>唯品会导航栏</title>
		<style>
			*{  /*找到所有的标签，去掉所有标签元素的内外边距*/
				margin:0;
				padding:0;
			}
			#main{ /*设置整个导航栏的背景色*/
				background-color: #F10180;/*查看element styles查看原背景色*/
				/*height 和 line-height是搭配使用的，使整个div中的元素上下居中*/
				height:40px; 
				line-height:40px;
			}
			ul{
				margin:0 100px; /*设置无序列表左右距离为100px*/
			}
			ul li{
				list-style-type:none; /*去掉列表项的实心点*/
				font-size:16px;
				float:left;
			}
			ul li a{
				text-decoration:none; /*去掉a 标签的下划线*/
				color:#FFFFFF;
				padding:0px 14px; /*设置a标签内边距距离上下 0，左右14px */
			}
			li.big{ /*前四个字体较大，我们设置一下*/
				font-weight:700;
			}
			ul li:hover{ /*给列表项添加鼠标悬浮效果*/
				background-color:#DB0A76;
			}
			/*给当前页标签设置背景颜色*/
			ul li.current{
				background-color:#BD1067;
			}
			ul li.right{
				float:right;
			}
			/*右侧俩个标签的图片样式*/
			.right img{
				/*设置垂直居中*/
				vertical-align:middle;
				margin-top:-5px;
				margin-right:6px;
			}
			.last a{
				/*添加右边框*/
				border-right:1px solid #fff;
			}
			li .more{
				position:relative;
			}
			/*更多标签的小三角绘制*/
			.caret{
				height:0;
			    width:0;
			    /*边框颜色transparent透明 */
			    border-color:#fff transparent transparent transparent;
			    border-style:solid; /*边框类型实线*/
			    border-width:6px;
			    position:absolute;
			    top:18px;
			}
			
		</style>
	</head>
	<body>
		<div id="main">
			<ul>
				<li class="big current"><a href="">首页</a></li>
				<li class="big"><a href="">唯品国际</a></li>
				<li class="big"><a href="">母婴</a></li>
				<li class="big"><a href="">家居家电</a></li>
				<li><a href="">男士</a></li>
				<li><a href="">美妆</a></li>
				<li><a href="">生活</a></li>
				<li><a href="">金融</a></li>
				
				<li class="right">
					<a href="">
						<img src="wph/smallTag2.png"/>预告
					</a>
				</li>
				<li class="right last">
					<a href="">
						<img src="wph/smallTag1.png"/>分类
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>
